<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body, div, h2, p {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #666666;
        }


        .box {
            /* 必须是绝对定位 */
            position: absolute;

            width: 300px;
            background: blue;
            cursor: move;
            border: 2px solid black;

            top: 50%;
            left: 50%;
        }

        .box h2 {
            color: white;
            font-size: 20px;
            line-height: 1em;
            background-color: #222;
            border-bottom: 2px solid #ccc;
            text-align: center;
            padding: 0 10px;
        }

        .box p {
            color: white;
        }

        #backtrack {
            border-top: 1px solid black;
            padding: 0 10px;
            vertical-align: bottom;
            text-align: right;
        }

        #backtrack a {
            text-decoration: none;
            color: white;
        }

        #backtrack a:hover {
            text-decoration: underline;
            color: black;
        }

        /* 不可点击 */
        .notClick{
             pointer-events: none;
         }

    </style>
</head>
<body>
<div class="box" id="eDrag">
    <h2>一个寂寞的拖拽框</h2>
    <p><strong>isDragged:</strong><span id="eIsDragged">false</span></p>
    <p><strong>offsetTop:</strong><span id="eOffsetTop">229</span></p>
    <p><strong>offsetLeft:</strong><span id="eOffsetLeft">385</span></p>
    <p id="backtrack">
        <a id="aPlayback" href="javascript:">点此回放拖动轨迹</a>
        <a id="aBacktrack" href="javascript:">点此倒放拖动轨迹</a>
    </p>
</div>

<script>
    // 元素
    let eDrag = document.getElementById('eDrag');  // 拖动框
    let eIsDragged = document.getElementById('eIsDragged');
    let eOffsetTop = document.getElementById('eOffsetTop');
    let eOffsetLeft = document.getElementById('eOffsetLeft');

    let aPlayback = document.getElementById('aPlayback');
    let aBackTrack = document.getElementById('aBacktrack');

    // 鼠标和拖动框的差异的x和y值
    let diffX = 0;
    let diffY = 0;

    // 拖动框当前的状态
    let nowX = eDrag.offsetLeft;
    let nowY = eDrag.offsetTop;
    let isDragged = false;

    // 状态数组
    let positionArray = [
        {
            x: eDrag.offsetLeft,
            y: eDrag.offsetTop,
        }
    ]

    // 更新状态栏   监听状态函数
    function updateShowInfo() {
        eIsDragged.innerText = isDragged;
        eOffsetTop.innerText = nowY;
        eOffsetLeft.innerText = nowX;
    }

    // 移动元素
    function moveTarget(target, x, y) {
        target.style.left = x + 'px';
        target.style.top = y + 'px';
    }

    // 在拖动框身上按下鼠标时
    eDrag.onmousedown = function (event) {
        event = event || window.event;

        isDragged = true;
        diffX = event.clientX - eDrag.offsetLeft;
        diffY = event.clientY - eDrag.offsetTop;


        if (typeof eDrag.setCapture !== "undefined") {
            eDrag.setCapture();
        }
    }

    // 在页面上移动鼠标时
    document.onmousemove = function (event) {

        if (!isDragged) {
            return;
        }
        // console.log("拖动中")

        event = event || window.event;

        nowX = event.clientX - diffX;
        nowY = event.clientY - diffY;

        if (nowX < 0) {
            nowX = 0;
        } else if (nowX > window.innerWidth - eDrag.offsetWidth) {
            nowX = window.innerWidth - eDrag.offsetWidth;
        }

        if (nowY < 0) {
            nowY = 0;
        } else if (nowY > window.innerHeight - eDrag.offsetHeight) {
            nowY = window.innerHeight - eDrag.offsetHeight;
        }

        // 放入轨迹数组中
        positionArray.push(
            {
                x: nowX,
                y: nowY,
            }
        )

        // 移动元素
        moveTarget(eDrag, nowX, nowY)

        // 更新显示信息
        // console.log(nowX + 'px', nowY + 'px')
        updateShowInfo();
    }

    // 放开鼠标时
    document.onmouseup = window.onblur = eDrag.onlosecapture = function (event) {
        isDragged = false;

        if (typeof eDrag.releaseCapture != "undefined") {
            eDrag.releaseCapture();
        }

        updateShowInfo();
    }

    //正放拖动轨迹
    aPlayback.onclick = function () {
        if (positionArray.length === 1)
            return;

        let timer = setInterval(function () {
            let tmpPos = positionArray.shift();
            if (tmpPos) {
                moveTarget(eDrag, tmpPos.x, tmpPos.y);
            } else {
                clearInterval(timer);
            }
        }, 33);
    };

    //倒放拖动轨迹
    aBackTrack.onclick = function () {
        if (positionArray.length === 1)
            return;

        let timer = setInterval(function () {
            let tmpPos = positionArray.pop();
            if (tmpPos) {
                moveTarget(eDrag, tmpPos.x, tmpPos.y);
            } else {
                clearInterval(timer);
            }

        }, 33);
    };

    updateShowInfo();

</script>
</body>
</html>